<!-- 各类状态弹窗组件 -->
<template>
  <u-popup 
    :show="pShow" 
    :round="10" 
    :mode="mode" 
    :safeAreaInsetBottom="mode === 'bottom'" 
    closeOnClickOverlay
    @close="pShow = false">
    <view class="statusPopup" :class="{'centerBox': mode === 'center'}">
      <view v-if="title" class="fz-18 pb-20">{{title}}</view>
      <image
        v-if="type === 'success'"
        src="https://onelive.obs.cn-south-1.myhuaweicloud.com/uniapp/static/image220701%2817%29.png"
        style="width: 160rpx; height: 160rpx"
      />
      <image
        v-if="type === 'error'"
        src="https://onelive.obs.cn-south-1.myhuaweicloud.com/uniapp/static/image220701%2818%29.png"
        style="width: 160rpx; height: 160rpx"
      />
      <image
        v-if="type === 'time'"
        src="https://onelive.obs.cn-south-1.myhuaweicloud.com/uniapp/static/image220701%2819%29.png"
        style="width: 160rpx; height: 160rpx"
      />
      <slot></slot>
      <view class="pt-50" style="width:100%;">
        <u-button
          type="primary"
          :text="btnText"
          :customStyle="{
            fontSize: '32rpx',
            borderRadius: '20rpx',
            height: '88rpx',
          }"
          :throttleTime="500"
          @click="confirmFn"
        ></u-button>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    mode: {
      type: String,
      default: "bottom"
    },
    // 头部标题
    title: {
      type: String,
      default: ""
    },
    // 图标类型
    type: {
      type: String,
      default: "success", // success成功 error 失败 time 等待
    },
    // 按钮文字
    btnText: {
      type: String,
      default: "返回",
    },
  },
  watch: {
    show(nval) {
      this.pShow = nval;
    },
    pShow(nval) {
      if (!nval) {
        this.$emit("close");
      }
    },
  },
  data() {
    return {
      pShow: false,
    };
  },
  methods: {
    confirmFn(){
      this.$emit('confirm')
    }
  },
};
</script>

<style lang="scss" scoped>
.statusPopup {
  padding: 100rpx 40rpx 50rpx 40rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.centerBox{
  width: 85vw;
  padding-bottom: 60rpx !important;
}
</style>